<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{getLangText(label.legend)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button> -->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<div class="table-row-item">
					<span>{{getLangText(label.isShow)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="legend.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>
				<md-field>
					<label>{{getLangText(label.left)}}</label>
					<md-input v-model="legend.left"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.top)}}</label>
					<md-input v-model="legend.top"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.right)}}</label>
					<md-input v-model="legend.right"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.bottom)}}</label>
					<md-input v-model="legend.bottom"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.orient)}}</label>
					<md-select v-model="legend.orient">
						<md-option value="horizontal">{{getLangText(label.horizontal)}}</md-option>
						<md-option value="vertical">{{getLangText(label.vertical)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.align)}}</label>
					<md-select v-model="legend.align">
						<md-option :value="item.en" v-for="item in align" :key="item.en">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.padding)}}</label>
					<md-input v-model="legend.padding"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.itemGap)}}</label>
					<md-input v-model="legend.itemGap"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.itemWidth)}}</label>
					<md-input v-model="legend.itemWidth"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.itemHeight)}}</label>
					<md-input v-model="legend.itemHeight"></md-input>
				</md-field>
				<div class="table-row-item">
					<span>{{getLangText(label.bg)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:legend.backgroundColor}"
							@click="showColorPicker('backgroundColor')"
						></span>
						{{legend.backgroundColor}}
					</span>
				</div>
				<color-picker
					:lang-type="langType"
					:rgba="legend.backgroundColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='backgroundColor'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.borderWidth)}}</label>
					<md-input v-model="legend.borderWidth"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.borderColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:legend.borderColor}"
							@click="showColorPicker('borderColor')"
						></span>
						{{legend.borderColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="legend.borderColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='borderColor'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.borderRadius)}}</label>
					<md-input v-model="legend.borderRadius"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.shadowBlur)}}</label>
					<md-input v-model="legend.shadowBlur"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.shadowColor)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:legend.shadowColor}"
							@click="showColorPicker('shadowColor')"
						></span>
						{{legend.shadowColor}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="legend.shadowColor"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='shadowColor'"
				></color-picker>

				<md-field>
					<label>{{getLangText(label.shadowOffsetX)}}</label>
					<md-input v-model="legend.shadowOffsetX"></md-input>
				</md-field>
				<md-field>
					<label>{{getLangText(label.shadowOffsetY)}}</label>
					<md-input v-model="legend.shadowOffsetY"></md-input>
				</md-field>
			</div>
			<bi-text-style :lang-type="langType" @text-style-result="onTextStyle"></bi-text-style>
		</div>
	</div>
</template>
<script>
	import ColorPicker from "@/components/comp/ColorPicker";
	import TextStyle from "@/components/comp/TextStyle";
	export default {
		name: "Legend",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		components: {
			"bi-text-style": TextStyle,
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				legend: { zh: "图例", en: "legend" },
				isShow: { zh: "是否显示", en: "isShow" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				left: { zh: "左侧距离", en: "left" },
				top: { zh: "上侧距离", en: "top" },
				right: { zh: "右侧距离", en: "right" },
				bottom: { zh: "下侧距离", en: "bottom" },
				orient: { zh: "布局朝向", en: "orient" },
				horizontal: { zh: "横向", en: "horizontal" },
				vertical: { zh: "纵向", en: "vertical" },
				align: { zh: "对齐", en: "align" },
				itemGap: { zh: "项间隔", en: "itemGap" },
				itemWidth: { zh: "图形宽度", en: "itemWidth" },
				itemHeight: { zh: "图形高度", en: "itemHeight" },
				bg: { zh: "背景颜色", en: "bgColor" },
				borderColor: { zh: "边框颜色", en: "borderColor" },
				borderWidth: { zh: "边框线宽", en: "borderWidth" },
				borderRadius: { zh: "圆角半径", en: "borderRadius" },
				shadowBlur: { zh: "阴影模糊大小", en: "shadowBlur" },
				shadowColor: { zh: "阴影颜色", en: "shadowColor" },
				shadowOffsetX: { zh: "阴影水平偏移", en: "shadowOffsetX" },
				shadowOffsetY: { zh: "阴影垂直偏移", en: "shadowOffsetY" },
				padding: { zh: "内边距", en: "padding" }
			},
			isShow: false,
			align: [
				{ zh: "自动", en: "auto" },
				{ zh: "左对齐", en: "left" },
				{ zh: "右对齐", en: "right" }
			],
			legend: {
				show: true,
				left: "auto",
				top: "auto",
				right: "auto",
				bottom: "auto",
				orient: "horizontal",
				align: "auto",
				padding: 5,
				itemGap: 10,
				itemWidth: 25,
				itemHeight: 14,
				backgroundColor: "transparent",
				borderColor: "#ccc",
				borderWidth: 0,
				borderRadius: 0,
				shadowBlur: "",
				shadowColor: "",
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				textStyle: {
					
				}
			},
			picker: {
				show: false,
				current: ""
			},
			originOption:"",
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();					
				}else{
					this.picker.show = false;
				}

			},
			legend:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("legend-result", JSON.parse(JSON.stringify([this.legend])));
				}
			}
		},
		methods: {
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				if (this.picker.current) this.legend[this.picker.current] = op.rgba;
			},
			onTextStyle(result) {
				this.legend.textStyle = result;
			},
			sendStyle() {
				this.isShow=this.isShow?false:true;
				if(!this.isShow){
				this.$emit("legend-result", JSON.parse(JSON.stringify([this.legend])));
				}
			},
			
			parseObj() {
				if(this.option instanceof Array&&this.option.length==1){
					this.isParse=true;
					var option=this.option[0];
				for (var key in option) {
					this.legend[key] = option[key];
				}
				this.originOption='';
				}
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption(){
			this.isShow=false;
			var that=this;
			if(this.originOption!=JSON.stringify(this.legend)){	
				setTimeout(() => {
					that.$emit("legend-result", [that.legend]);
				}, 50);		
			
			}
			},
			listenEvent(){
				this.app.$on('close-option',this.colseOption);
			},
			offEvent(){
			this.app.$off('close-option',this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
			
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>
